<script lang="ts" setup>
  import { User } from '@/types/user';
  import { onMounted, ref } from 'vue';
  import { Form, Message } from '@arco-design/web-vue';
  import { updateUser } from '@/api/user';
  import ProvinceJSON from '@/config/province.json';
  import CityJSON from '@/config/city.json';

  const props = defineProps<{
    user: User;
  }>();

  const emit = defineEmits(['close']);

  const data = ref<Partial<User>>({});
  onMounted(() => {
    data.value = {
      ...props.user,
    };
  });

  const handleProvinceChanged = () => {
    data.value.city = undefined;
  };

  const saving = ref(false);
  const formRef = ref<InstanceType<typeof Form> | null>(null);
  const handleSubmit = async () => {
    if (formRef.value) {
      const validate = await formRef.value.validate();
      if (!validate) {
        try {
          saving.value = true;
          await updateUser(data.value);
          Message.success('操作成功');
          emit('close', true);
        } finally {
          saving.value = false;
        }
      }
    }
  };
</script>

<template>
  <a-modal
    title="修改用户信息"
    :width="500"
    visible
    :ok-loading="saving"
    @cancel="emit('close', false)"
    @before-ok="handleSubmit"
  >
    <a-form ref="formRef" :model="data" layout="vertical">
      <a-form-item
        label="名称"
        field="nickname"
        :rules="[{ required: true, message: '不能为空' }]"
      >
        <a-input v-model="data.nickname" />
      </a-form-item>

      <a-form-item
        label="年纪"
        field="ageType"
        :rules="[{ required: true, message: '不能为空' }]"
      >
        <a-select
          v-model="data.ageType"
          :options="[
            { label: '青少年', value: 1 },
            { label: '成人', value: 2 },
          ]"
        ></a-select>
      </a-form-item>

      <template v-if="data.ageType === 1">
        <a-form-item
          label="证件类型"
          field="idType"
          :rules="[{ required: true, message: '不能为空' }]"
        >
          <a-select
            v-model="data.idType"
            :options="['大陆居民身份证', '护照', '台胞证', '回乡证']"
          />
        </a-form-item>

        <a-form-item
          label="证件号码"
          field="idNo"
          :rules="[{ required: true, message: '不能为空' }]"
        >
          <a-input v-model="data.idNo" />
        </a-form-item>
      </template>

      <a-form-item
        label="手机号"
        field="phone"
        :rules="
          data.ageType === 2 ? [{ required: true, message: '不能为空' }] : []
        "
      >
        <a-input v-model="data.phone" />
      </a-form-item>

      <a-form-item
        label="性别"
        field="sex"
        :rules="[{ required: true, message: '不能为空' }]"
      >
        <a-radio-group
          v-model="data.sex"
          :options="[
            { label: '男性', value: 1 },
            { label: '女性', value: 0 },
          ]"
        ></a-radio-group>
      </a-form-item>

      <a-form-item
        label="是否是虚拟球员"
        field="unReal"
        :rules="[{ required: true, message: '不能为空' }]"
      >
        <a-radio-group
          v-model="data.unReal"
          :options="[
            { label: '否', value: 0 },
            { label: '是', value: 1 },
          ]"
        />
      </a-form-item>

      <a-form-item
        label="省份"
        field="province"
        :rules="[{ required: true, message: '不能为空' }]"
      >
        <a-select
          v-model="data.province"
          allow-search
          @change="handleProvinceChanged"
        >
          <a-option v-for="p in ProvinceJSON" :key="p.id" :value="p.id">
            {{ p.name }}
          </a-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="城市"
        field="city"
        :rules="[{ required: true, message: '不能为空' }]"
      >
        <a-select v-model="data.city" allow-clear>
          <a-option
            v-for="c in CityJSON[data.province as keyof typeof CityJSON]"
            :key="c.id"
            :value="c.id"
          >
            {{ c.name }}
          </a-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
